<script setup lang="ts">

import TenantDataboardChart1 from "@/views/tenant/tenant-databoard-chart1.vue";
import {computed} from "vue";
import {useAppStore} from "@/store/modules/app";
import TenantDataboardChart2 from "@/views/tenant/tenant-databoard-chart2.vue";
import TenantDataboardChart3 from "@/views/tenant/tenant-databoard-chart3.vue";

defineOptions({
  name: 'TenantDataboard'
})

const appStore = useAppStore();
const gap = computed(() => (appStore.isMobile ? 0 : 8));
</script>

<template>
  <TenantDataboardChart3/>
  <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
    <NGi span="24 s:24 m:12" style="padding: 0.5rem .1rem .5rem .5rem">
      <TenantDataboardChart2/>
    </NGi>
    <NGi span="24 s:24 m:12" style="padding: 0.5rem .5rem .5rem .1rem">
      <TenantDataboardChart1/>
    </NGi>
  </NGrid>
</template>

<style scoped>

</style>
